
import React, { memo, useCallback, useMemo, useState } from "react";

import SongCover from '@/components/song-cover';

import sty from './sty.module.css'
import { useSelector, shallowEqual } from "react-redux";

import { useDispatch } from "react-redux";
import { getCategorySongsAction } from "../../store/actionCreators";
import { Pagination, Skeleton } from "antd";
const SongList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const { categorySongs } = useSelector(state => ({
    categorySongs: state.getIn(['songs', 'categorySongs'])
  }), shallowEqual)


  const dispatch = useDispatch();

  const changePage = useCallback((page) => {
    window.scrollTo({
      behavior: 'smooth',
      top: 0
    })
    setCurrentPage(page);
    dispatch(getCategorySongsAction(page))
  }, [dispatch])

  const songList = useMemo(() => categorySongs.playlists || [], [categorySongs])

  return <div className={sty.root}>
    <ul className={sty.songsList}>
      {
        songList.length ? songList.map(v => <SongCover key={v.id}
          info={v}
        />) : <Skeleton active />
      }
    </ul>
    <Pagination
      className={sty.pageContainer}
      onChange={changePage}
      total={categorySongs.total}
      current={currentPage}
    />
  </div>
}
export default memo(SongList)